<template>
    <el-card class="box-card" style="width: 500px;height:460px;margin: 10px auto;text-align: center">
        <template #header>
            <div class="card-header">
                <span>登录</span>
            </div>
        </template>
        <el-button @click="loginWay=true" >用户名密码登录</el-button>
        <el-button @click="loginWay=false">手机验证码登录</el-button>
        <el-form label-width="100px" style="display: inline-block;">
            <div style="margin-top: 20px">
                <LoginByUsername v-if="loginWay"/>
                <login-by-phone v-else/>
            </div>

        </el-form>
    </el-card>
</template>

<script setup>
import {ref} from "vue";
import LoginByUsername from "@/components/login/LoginByUsername.vue";
import LoginByPhone from "@/components/login/LoginByPhone.vue";

const loginWay = ref(true)

// const innerDrawer = ref(false)
// const user = ref({username:'',password:''})

</script>

<style scoped>
.div-input{
    margin-bottom: 20px;
}
a{
    text-decoration: none;
    color: deepskyblue
}
</style>